<template>
  <div id="staFeeItemDiv">
    <Splitpanes style="height: 100%">
      <Pane size="50">
        <vxe-toolbar perfect>
          <template #buttons>
            <vxe-input style="width: 180px" v-model="searchForm.searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getStaFeeItemList" @search-click="getStaFeeItemList()"></vxe-input>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="tloading" @click="getStaFeeItemList"></vxe-button>
            <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新建" @click="clearForm()"></vxe-button>
            <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="handleDelete"></vxe-button>
          </template>
        </vxe-toolbar>

        <div class="modulTable">
          <vxe-table ref="staFeeTableRef" class="mytable-scrollbar staModuleTableClazz" border="inner" align="center" height="auto" :data="staFeeItemList" :loading="tloading" @current-change="rowClick" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
            <vxe-column type="checkbox" width="30"></vxe-column>
            <vxe-column type="seq" title="#" width="30"></vxe-column>
            <vxe-column field="feeCode" title="项目编号" width="90"></vxe-column>
            <vxe-column field="feeName" title="项目名称" ></vxe-column>
            <vxe-column field="shortName" title="项目简称"></vxe-column>
            <vxe-column field="workGroup" title="工作组" >
              <template #default="{ row }">
                {{ getWorkGroupName(row) }}
              </template>
            </vxe-column>
          </vxe-table>
          <vxe-pager align="left" min-height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="[
                'PrevJump',
                'PrevPage',
                'Number',
                'NextPage',
                'NextJump',
                'Sizes',
                'FullJump',
                'Total'
              ]" @page-change="handleSizeChange($event)"></vxe-pager>
        </div>
      </Pane>
      <Pane size="50">
        <el-tabs type="border-card" v-model="activeName" @tab-click="tabHandleClick">
          <el-tab-pane label="基础信息" name="first">
            <el-form ref="labFeeItemFormRef" :model="labFeeItemForm" label-width="110px" class="form-input-m baseForm" v-loading="showLoading" inline-message>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="项目名称" prop="feeName">
                    <el-input v-model="labFeeItemForm.feeName" placeholder="项目名称" clearable @mouseleave="autoInputCode()"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目编号" prop="feeCode">
                    <el-input v-model="labFeeItemForm.feeCode" placeholder="项目编号" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="项目简称" prop="shortName">
                    <el-input v-model="labFeeItemForm.shortName" placeholder="项目简称" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="项目类型" prop="workGroup">
                    <el-select v-model="labFeeItemForm.workGroup" filterable placeholder="请选择工作组" style="width: 200px">
                      <el-option v-for="workGroup in workGroupList" :key="workGroup.id" :label="workGroup.name" :value="workGroup.code"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="助记符" prop="inputCode">
                    <el-input v-model="labFeeItemForm.inputCode" placeholder="助记符" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="规格" prop="spec">
                    <el-input v-model="labFeeItemForm.spec" placeholder="规格" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="适合性别" prop="fitSex">
                    <el-radio-group v-model="labFeeItemForm.fitSex">
                      <el-radio label="0">男</el-radio>
                      <el-radio label="1">女</el-radio>
                      <el-radio label="2">全部</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否急诊项目" prop="isEmergency">
                    <el-radio-group v-model="labFeeItemForm.isEmergency">
                      <el-radio label="0">常规</el-radio>
                      <el-radio label="1">急诊</el-radio>
                      <el-radio label="2">全部</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="23">
                  <el-form-item label="备注" prop="remake">
                    <el-input v-model="labFeeItemForm.remake" placeholder="请输入备注" clearable type="textarea"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item class="form-footer">
                <template #default>
                  <el-button type="primary" @click="add()">新建</el-button>
                  <el-button type="primary" @click="save()">保存</el-button>
                </template>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="检验项目对照" name="second" :disabled="isEmpty(labFeeItemForm.id)">
            <StaDictItemCompare ref="dictItemCompareRef" />
          </el-tab-pane>
        </el-tabs>
      </Pane>
    </Splitpanes>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import moment from 'moment';
let { proxy }: any = getCurrentInstance();
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示
import {AppStore} from "@/stores/store";
import {isEmpty} from "lodash";
import {funBdsJsResult} from "@/utils/Expression";
import StaDictItemCompare from './StaDictItemCompare.vue';
let dictItemCompareRef: any = ref(null);

let store = AppStore();


defineExpose({ initPage });


let searchForm = {
  searchValue: ''
};
let tloading = ref(false); //加载状态
let showLoading = ref(false); //刷新+表格加载
let activeName = ref('first');
let staFeeItemList = reactive([]);
let workGroupList: any = reactive([]); //字典表：指控规则类型


// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});
let labFeeItemForm = reactive({
  id: '',
  feeCode: '',
  feeName: '',
  workGroup: '',
  inputCode: '',
  hisItemCode: '',
  hisItemName: '',
  hisItemType: '',
  spec: '',
  fitSex: '',
  isEmergency: '',
  shortName: '',
  remake: '',
  orgId: store.userInfo.orgId,
  orgName: store.userInfo.orgName
});


// 页面加载时更新报告单元/字典
onMounted(() => {
  getDictDetailList(); //加载字典
});
//从词典获取所有的报告组
//获取界面字段
function getDictDetailList() {
  workGroupList.length = 0;
  const url = '/api/sys/basDictDetail/findDictDetailList';
  proxy.$http
      .get(url, { params: { code: 'JYGZZ' } })
      .then((res: any) => {
        workGroupList.push(...res.data);
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}

function tabHandleClick(tab: any) {
  if (tab.props.name == 'second') {
    dictItemCompareRef.value.initPage(labFeeItemForm);
  }
}
function initPage() {
  getStaFeeItemList();
}

//点击每页数量(分页查询)
function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  getStaFeeItemList();
}

// 新建&重置
function add() {
  Object.keys(labFeeItemForm).forEach((key) => {
    switch (typeof labFeeItemForm[key]) {
      case 'string':
        labFeeItemForm[key] = '';
        break;
      case 'number':
        labFeeItemForm[key] = 0;
        break;
    }
  });
}

// 保存
function save() {
  let url = '/lis/sta/feeItem/savaOrUpdateFeeItem';
  proxy.$http
      .post(url, labFeeItemForm)
      .then((res: any) => {
        VxeMessage(res.status.msg, VxeNotifyType.success);
        getStaFeeItemList();
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}
// 自动生成助记符
function autoInputCode() {
  labFeeItemForm.inputCode = funBdsJsResult('firstPinYinFun', labFeeItemForm.feeName);
}
// 删除数据
function handleDelete() {
  const selectRows = (proxy.$refs.staFeeTableRef as any).getCheckboxRecords();
  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的数据', VxeNotifyType.warning);
    return;
  }
  const url = '/lis/sta/feeItem/deleteFeeItem';
  proxy.$http
      .post(url, selectRows)
      .then((res: any) => {
        getStaFeeItemList();
        VxeMessage(res.status.msg, VxeNotifyType.success);
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}


// 获取申请项目列表
function getStaFeeItemList() {
  showLoading.value = true;
  tloading.value = true;
  staFeeItemList.length = 0;
  const url = '/lis/sta/feeItem/findFeeItemList';
  let obj = {
    keyWords: searchForm.searchValue,
    orgId: labFeeItemForm.orgId,
    pageIndex: page.currentPage,
    pageSize: page.pageSize
  };
  proxy.$http
      .get(url, { params: obj })
      .then((res: any) => {
        staFeeItemList.push(...res.data.records);
        page.totalResult = res.data.total;

        const kn = staFeeItemList.find((k) => k.id == labFeeItemForm.id);
        if (isEmpty(kn)) {
          rowClick({ row: staFeeItemList[0] }); //默认选中第一条数据
        } else {
          rowClick({ row: kn }); //默认选中第一条数据
        }
        tloading.value = false;
        showLoading.value = false;
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
        showLoading.value = false;
      });
}
// 点击当前行// 行点击事件
const rowClick = ({ row }) => {
  if (isEmpty(row)) {
    clearForm();
  } else {
    (proxy.$refs.staFeeTableRef as any).setCurrentRow(row);
    Object.assign(labFeeItemForm, row);
    dictItemCompareRef.value.initPage(row);
  }
};

// 清空中间规则弹框表单
function clearForm() {
  labFeeItemForm.id = '';
  labFeeItemForm.feeCode = '';
  labFeeItemForm.feeName = '';
  labFeeItemForm.workGroup = '';
  labFeeItemForm.inputCode = '';
  labFeeItemForm.hisItemCode = '';
  labFeeItemForm.hisItemName = '';
  labFeeItemForm.hisItemType = '';
  labFeeItemForm.spec = '';
  labFeeItemForm.fitSex = '';
  labFeeItemForm.isEmergency = '';
  labFeeItemForm.shortName = '';
  labFeeItemForm.remake = '';
  labFeeItemForm.orgId = '';
}
function getWorkGroupName(row) {
  // proxy.$nextTick(() => {
  if (workGroupList.length > 0) {
    const group = workGroupList.find((item) => item.code == row.workGroup);
    return group ? group.name : '';
  }
}

</script>

<style lang="scss" scoped>
#staFeeItemDiv {
  height: 100%;

  // 附加按钮间距
  .button-blue,
  .button-red {
    margin: 5px 0 5px 5px;
  }

  //右侧质控项目表格
  .modulTable {
    height: calc(100% - 40px - 30px);
    background-color: $base-white;
  }
}
</style>